<!DOCTYPE html>
<!--[if IE 8]> <html lang="zh-CN" class="ie8"> <![endif]-->
<html lang="zh-CN">

<head>
	<link rel="shortcut icon" href="http://ronghuanet.cn/public/index/img/rhicon.png">
	<meta charset="utf-8" />
	<title>用户注册 - 用户中心 </title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

	<link type="text/css" rel="stylesheet" href="css/common.css" />
	<link type="text/css" rel="stylesheet" href="css/register.css" />
	<link type="text/css" rel="stylesheet" href="css/color-style.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/placeholder.js"></script>
	<script type="text/javascript" src="js/login.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/jquery.method.js"></script>
	<script type="text/javascript" src="js/jquery.modal.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/plugins/vue/dist/vue.js"></script>
	<script type="text/javascript" src="js/plugins/axios/dist/axios.js"></script>
	<script src="js/jquery.cookie.js"></script>
	<script src="js/axios.common.js"></script>
	<link rel="stylesheet" href="js/jqueryAlert/alert.css">
	<script src="js/jqueryAlert/alert.js"></script>
</head>

<body>
<div class="header w990">
	<div class="logo-info">
		<a href="http://user.ymcc.com" class="logo">
			<img alt="" src="http://ronghuanet.cn/upload/images/20220402/0d0a48af94e599cce56f4e2d99fcaf5e_236x67.png"  height="60px"/>
		</a>
		<span class="findpw">欢迎注册</span>
	</div>
</div>
<div id="myApp" class="reg-content">
	<div class="w990">
		<div class="reg-form">
			<div class="reg-con">

				<div class="reg-type">
					<p class="login-info">
						我已经注册，现在就
						<a href="http://127.0.0.1/login.html" title="去登录" class="color">登录</a>
					</p>

					<ul class="clearfix">
						<li class="active">
							<a href="javascript:void(0);">手机注册</a>
						</li>
						<li>
							<a href="/register/email.html">邮箱注册</a>
						</li>
					</ul>

				</div>

				<div class="reg-wrap" style="background: url(css/register-bg.jpg) no-repeat 480px 60px;">
					<div class="reg-wrap-con">
						<!-- 手机注册 start -->
						<form id="MobileRegisterModel" class="form-horizontal" name="MobileRegisterModel" action="/register/mobile.html" method="post">
							<input type="hidden" name="_csrf" value="alJHek5GNGsyKi9NCj5/Ej8aGCV9E109PApyPX8XYRFSFgA1IAkMHA==">
							<!-- 手机号 -->
							<div class="form-group form-group-spe">
								<label for="mobileregistermodel-mobile" class="input-left">
									<span class="spark">*</span>
									<span>手机号：</span>
								</label>
								<div class="form-control-box">

									<input type="text" v-model="formParams.mobile" id="mobileregistermodel-mobile" class="form-control" name="MobileRegisterModel[mobile]">

								</div>

								<div class="invalid"></div>
							</div>
							<input style="display: none">
							<!-- 密码 -->
							<div class="form-group form-group-spe">
								<label for="mobileregistermodel-password" class="input-left">
									<span class="spark">*</span>
									<span>密码：</span>
								</label>
								<div class="form-control-box">

									<input  v-model="formParams.password"  type="password" id="password" class="form-control" name="MobileRegisterModel[password]" value="" autocomplete="off">
									<i class="fa fa-eye-slash pwd-toggle" data-id="password"></i>

								</div>

								<div class="invalid"></div>
							</div>
							<!-- 验证码 -->

							<div class="form-group form-group-spe">
								<label for="mobileregistermodel-captcha" class="input-left">

									<span>验证码：</span>
								</label>
								<div class="form-control-box">

									<input  v-model="formParams.imageCode" type="text" id="captcha" class="input-small" name="MobileRegisterModel[captcha]">
									<label class="captcha">

										<img id="captcha-image-temp" @click="getImageCode"
											 class="captcha-image-temp" :src="imageCode" alt="点击换图" title="点击换图" style="vertical-align: middle; cursor: pointer;">

									</label>

								</div>

								<div class="invalid"></div>
							</div>

							<!-- 短信校验码 -->
							<div class="form-group form-group-spe">
								<label for="mobileregistermodel-sms_captcha" class="input-left">
									<span class="spark">*</span>
									<span>短信校验码：</span>
								</label>
								<div class="form-control-box">

									<input   v-model="formParams.smsCode"  type="text" id="mobileregistermodel-sms_captcha" class="input-small" name="MobileRegisterModel[sms_captcha]">

									<button type="button" @click="sendSmsCode" class="phonecode">获取短信校验码</button>

								</div>

								<div class="invalid"></div>
							</div>
							<!-- 注册邀请码 -->

							<div class="form-group form-group-spe">
								<label for="mobileregistermodel-invite_code" class="input-left">

									<span>注册邀请码：</span>
								</label>
								<div class="form-control-box">

									<input type="text" id="mobileregistermodel-invite_code" class="input-small" name="MobileRegisterModel[invite_code]">

								</div>

								<div class="invalid"></div>
							</div>

							<div class="form-group m-10">
								<label class="input-left">&nbsp;</label>
								<div class="form-control-box">
									<label for="remember1">
										<input type="checkbox" value="0" name="remember" id="remember1" class="checkbox" checked="checked" />
										<span>
								我已阅读并同意
								<a href="javascript:void(0);" class="user_protocol">《用户注册协议》</a>
							</span>
									</label>
								</div>
							</div>
							<div class="reg-btn">
								<div class="form-group form-group-spe">
									<label for="" class="input-left">


									</label>
									<div class="form-control-box">

										<input type="button" @click="submitRegister" class="btn-img btn-entry bg-color" id="btn_submit" name="btn_submit" value="同意协议并注册">

									</div>

									<div class="invalid"></div>
								</div>
							</div>

						</form>
						<!-- 手机注册 end -->
					</div>
				</div>
			</div>
		</div>
		<!-- 验证码脚本 -->
		<script type="text/javascript" src="js/jquery.captcha.js"></script>
		<!-- 表单验证 -->
		<script type="text/javascript" src="js/jquery.validate.js"></script>
		<script type="text/javascript" src="js/jquery.validate.custom.js"></script>
		<script type="text/javascript" src="js/messages_zh.js"></script>
		<!-- 验证规则 -->
		<script id="client_rules" type="text">
					[{"id": "mobileregistermodel-mobile", "name": "MobileRegisterModel[mobile]", "attribute": "mobile", "rules": {"required":true,"messages":{"required":"手机号不能为空。"}}},{"id": "mobileregistermodel-password", "name": "MobileRegisterModel[password]", "attribute": "password", "rules": {"required":true,"messages":{"required":"密码不能为空。"}}},{"id": "mobileregistermodel-sms_captcha", "name": "MobileRegisterModel[sms_captcha]", "attribute": "sms_captcha", "rules": {"required":true,"messages":{"required":"短信校验码不能为空。"}}},{"id": "mobileregistermodel-mobile", "name": "MobileRegisterModel[mobile]", "attribute": "mobile", "rules": {"match":{"pattern":/^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}$/,"not":false,"skipOnEmpty":1},"messages":{"match":"手机号是无效的。"}}},{"id": "mobileregistermodel-mobile", "name": "MobileRegisterModel[mobile]", "attribute": "mobile", "rules": {"ajax":{"url":"\/register\/client-validate","model":"c2VydmljZVxyZWdpc3Rlclxtb2RlbHNcTW9iaWxlUmVnaXN0ZXJNb2RlbA==","attribute":"mobile","params":[]},"messages":{"ajax":"{attribute}\u0022{value}\u0022已被注册。"}}},{"id": "mobileregistermodel-password", "name": "MobileRegisterModel[password]", "attribute": "password", "rules": {"password":{"pattern":/^.{6,20}$/,"not":false,"skipOnEmpty":1},"match":{"pattern":/\s+/,"not":true,"skipOnEmpty":1},"messages":{"password":"密码长度为6-20个字符，建议由字母、数字和符号两种以上。","match":"密码不能包含空格。"}}},{"id": "mobileregistermodel-captcha", "name": "MobileRegisterModel[captcha]", "attribute": "captcha", "rules": {"captcha":{"hash":439,"hashKey":"niiCaptcha/site/captcha","caseSensitive":false},"messages":{"captcha":"验证码不正确。"}}},]
				</script>
		<script type="text/javascript">
			$().ready(function() {
				var validator = $("#MobileRegisterModel").validate();
				// 验证规则，此验证规则会影响编辑器中JavaScript的的格式化操作
				$.validator.addRules($("#client_rules").html());
				$("#btn_submit").click(function() {
					if(!validator.form()) {
						return;
					}

					$("#MobileRegisterModel").submit();

					return false;
				});


			});
		</script>
		<script type="text/javascript">
			$(function() {
				$("input[type='checkbox']").click(function() {
					if($(this).is(":checked")) {
						$("#btn_submit").removeAttr("disabled");
					} else {
						$("#btn_submit").attr("disabled", true);
					}
				});
			});
		</script>
	</div>
</div>
<!-- 用户协议 -->

<script type="text/javascript">

	$().ready(function() {
		new Vue({
			el:"#myApp",
			data(){
				return {
					imageCodePrefix:"data:image/jpg;base64,",
					imageCode:'',
					formParams:{
						mobile:'18244444444',
						password:'123456',
						imageCode:'',
						smsCode:'',
						imageCodeKey:'',
						regChannel:1
					}
				}
			},
			methods:{
				createUuid(){
					var s = [];
					var hexDigits = "0123456789abcdefghi";
					for (var i = 0; i < 36; i++) {
						s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
					}
					s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
					s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
					s[8] = s[13] = s[18] = s[23] = "-";

					var uuid = s.join("");
					return uuid;
				},
				getImageCode(){
					//发送请求到后台获取数据  VerifycodeController
					let imageCodeKey = sessionStorage.getItem("registerImageCodeKey");
					if(!imageCodeKey || imageCodeKey === ''){
						imageCodeKey = this.createUuid();
						sessionStorage.setItem("registerImageCodeKey",imageCodeKey);
						this.formParams.imageCodeKey = imageCodeKey;
					}
					this.$http.get("/common/verifycode/imageCode/"+imageCodeKey).then(res=>{
					    //res.data :就是base64编码后的图片的字符串
						this.imageCode = this.imageCodePrefix+res.data.data;
					})
				},
				submitRegister(){
					//4.发送ajax请求
					this.$http.post("/user/register",this.formParams).then(res=>{
						var ajaxResult = res.data;
						if(ajaxResult.success){
							$.alert("注册成功");
							window.location.href = "http://127.0.0.1:6003/login.html";
						}else{
							$.alert("发送失败:"+ajaxResult.message);
						}
					})
				},
				sendSmsCode(event){
					//1.判断手机号不为空
					if(!this.formParams.mobile){
						$.alert("手机号不能为空");
						return;
					}

					//2.判断图片验证码不为空
					if(!this.formParams.imageCode){
						$.alert("图片验证码不能为空");
						return;
					}

					//3.获取按钮，禁用按钮
					var sendBtn = $(event.target);
					sendBtn.attr("disabled",true);

					var param = {
						mobile: this.formParams.mobile,
						imageCode:this.formParams.imageCode,
						imageCodeKey:sessionStorage.getItem("registerImageCodeKey")
					};


					//4.发送ajax请求
					this.$http.post("/common/verifycode/sendSmsCode",param).then(res=>{
						var ajaxResult = res.data;
						if(ajaxResult.success){
							$.alert("手机验证码已经发送到您的手机，请在10分钟内使用");
							//4.1.发送成：倒计时
							var time = 10;

							var interval = window.setInterval( function () {
								//每一条倒计时减一
								time = time - 1 ;

								//把倒计时时间搞到按钮上
								sendBtn.html(time+"秒后重发");

								//4.2.倒计时完成恢复按钮
								if(time <= 0){
									sendBtn.html("重新发送");
									sendBtn.attr("disabled",false);
									//清除定时器
									window.clearInterval(interval);
								}
							},1000);
						}else{
							//4.3.发送失败：提示，恢复按钮
							sendBtn.attr("disabled",false);
							$.alert("发送失败:"+ajaxResult.message);
						}
					}).catch(error => {
						//4.3.发送失败：提示，恢复按钮
						sendBtn.attr("disabled",false);
						$.alert("发送失败:"+error.message);
					})
				}
			}
			,
			mounted(){
				this.getImageCode();
			}
		});


		$(".user_protocol").click(function() {
			if($.modal($(this))) {
				$.modal($(this)).show();
			} else {
				var modal = $.modal({
					title: "用户注册协议",
					trigger: $(this),
					content: $("#user_protocol").html()
				});
				modal.addButton({
					text: "同意协议并继续",
					click: function() {
						$("input[type='checkbox']").prop("checked", true);
						$("#btn_submit").removeAttr("disabled");
						this.hide();
					}
				});
			}
		});
	});
</script>


<!-- 底部 -->
<div class="site-footer">

	<div class="footer-desc-copyright" style="border-top: 1px solid #eeeeee">

		<p class="footer-ecscinfo">
			<a href="#">首页</a>
			|

			<a href="#">隐私保护</a>
			|

			<a href="#">联系我们</a>
			|

			<a href="#">免责条款</a>
			|

			<a href="#">公司简介</a>
			|

			<a href="#">意见反馈</a>

			|
			<a rel="nofollow" target="_blank" href="#">会员登录</a>
			|
			<a rel="nofollow" target="_blank" href="http://bbs.ymcc.com/">会员论坛</a>
			|
			<a href="javascript:;" rel="nofollow">客服热线028-86261949</a>
		</p>
		<p class="footer-otherlink">
			<a title="源码商城" target="_blank" href="http://ymcc.com">源码商城</a>

			|

			<a title="菁鱼课堂" target="_blank" href="http://user.ymcc.com">菁鱼课堂</a>

			|

			<a title="资讯速递" target="_blank" href="http://user.ymcc.com">资讯速递</a>

			|

			<a title="快递查询" target="_blank" href="http://m.kuaidi100.com">快递查询</a>

			|

			<a title="论坛" target="_blank" href="http://bbs.itsource.com/forum.php">会员论坛</a>

			|

			<a title="源代码教育咨询有限公司" target="_blank" href="http://user.ymcc.com">源代码教育咨询有限公司</a>

		</p>

		<p class="footer-beian"> ICP备案证书号:
			<a rel="nofollow" target="_blank" href="#">蜀ICP备88888888号-1</a>
			<a rel="nofollow" target="_blank" href="#"><i></i>蜀公网安备 45323525326664号</a>
		</p>
		<p class="footer-Copyright">Copyright &copy; 2017
			<a target="_blank" style="margin:0;padding:0;" href="http://www.saodangzu.com/">ymcc.com</a> All Rights Reserved. </p>
		<p>&nbsp;</p>

		<p class="footer-fp-img">
			<a target="_blank" href="#"><img src="img/test/kxwz.png"></a>
			<a target="_blank" href="#"><img src="img/test/smyz.png"></a>
			<a target="_blank" href="#"><img src="img/test/cxyz.jpg"></a>
			<a target="_blank" href="#"><img src="img/test/hyyz.png"></a>
			<a target="_blank" href="#"><img src="img/test/jpfw.png"></a>
		</p>
	</div>

</div>
<!-- 底部 _end-->
</body>


</html>